<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="UTF-8" />
    <title>Icon - Direction</title>
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
    />
    <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
    <script src="../../../../../scripts/testing/scripts.js"></script>
    <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
  </head>

  <body>
    <ion-app>
      <ion-header>
        <ion-toolbar>
          <ion-buttons slot="start">
            <ion-back-button class="show-back-button"></ion-back-button>
          </ion-buttons>
          <ion-title>Icon - Direction</ion-title>
        </ion-toolbar>
      </ion-header>

      <ion-content>
        <h1>Flip RTL</h1>

        <ion-grid>
          <ion-row class="ion-align-items-center">
            <ion-col size="auto"><code>null</code></ion-col>
            <ion-col><ion-icon name="call" color="primary"></ion-icon></ion-col>
            <ion-col><ion-icon name="cut" color="secondary"></ion-icon></ion-col>
            <ion-col><ion-icon name="journal" color="tertiary"></ion-icon></ion-col>
            <ion-col><ion-icon name="alarm" color="success"></ion-icon></ion-col>
            <ion-col><ion-icon name="checkbox" color="warning"></ion-icon></ion-col>
            <ion-col><ion-icon name="brush" color="danger"></ion-icon></ion-col>
            <ion-col><ion-icon name="bicycle" color="medium"></ion-icon></ion-col>
          </ion-row>
          <ion-row class="ion-align-items-center">
            <ion-col size="auto"><code>true</code></ion-col>
            <ion-col><ion-icon name="call" color="primary" flip-rtl></ion-icon></ion-col>
            <ion-col><ion-icon name="cut" color="secondary" flip-rtl></ion-icon></ion-col>
            <ion-col><ion-icon name="journal" color="tertiary" flip-rtl></ion-icon></ion-col>
            <ion-col><ion-icon name="alarm" color="success" flip-rtl></ion-icon></ion-col>
            <ion-col><ion-icon name="checkbox" color="warning" flip-rtl></ion-icon></ion-col>
            <ion-col><ion-icon name="brush" color="danger" flip-rtl></ion-icon></ion-col>
            <ion-col><ion-icon name="bicycle" color="medium" flip-rtl></ion-icon></ion-col>
          </ion-row>
        </ion-grid>

        <ion-grid>
          <ion-row class="ion-align-items-center">
            <ion-col size="auto"><code>null</code></ion-col>
            <ion-col><ion-icon name="arrow-forward"></ion-icon></ion-col>
            <ion-col><ion-icon name="arrow-forward-circle"></ion-icon></ion-col>
            <ion-col><ion-icon name="arrow-back"></ion-icon></ion-col>
            <ion-col><ion-icon name="arrow-back-circle"></ion-icon></ion-col>
          </ion-row>
          <ion-row class="ion-align-items-center">
            <ion-col size="auto"><code>false</code></ion-col>
            <ion-col><ion-icon name="arrow-forward" flip-rtl="false"></ion-icon></ion-col>
            <ion-col><ion-icon name="arrow-forward-circle" flip-rtl="false"></ion-icon></ion-col>
            <ion-col><ion-icon name="arrow-back" flip-rtl="false"></ion-icon></ion-col>
            <ion-col><ion-icon name="arrow-back-circle" flip-rtl="false"></ion-icon></ion-col>
          </ion-row>
        </ion-grid>

        <ion-list>
          <ion-list-header>
            <ion-label>Item Detail Icons</ion-label>
          </ion-list-header>

          <ion-item detail>
            <ion-label> ion-item [detail] attr </ion-label>
          </ion-item>

          <ion-item href="#">
            <ion-label> a[ion-item] w/ push detail </ion-label>
          </ion-item>

          <ion-item onclick="testClick(event)">
            <ion-label> button[ion-item] w/ push detail </ion-label>
          </ion-item>

          <ion-item detail detail-icon="arrow-down">
            <ion-label>Detail with icon arrow down</ion-label>
          </ion-item>

          <ion-item detail detail-icon="home">
            <ion-label>Detail with icon home</ion-label>
          </ion-item>

          <ion-item detail detail-icon="/src/components/item/test/icons/heart-broken.svg">
            <ion-label>Detail with custom icon svg</ion-label>
          </ion-item>
        </ion-list>
      </ion-content>

      <style>
        h1 {
          padding-left: 10px;
          padding-inline-start: 10px;
        }

        ion-icon {
          font-size: 26px;
        }

        code {
          background: #e5e5e5;
        }

        ion-col[size='auto'] {
          width: 60px !important;
        }
      </style>
    </ion-app>
  </body>
</html>
